<!DOCTYPE html>
<html lang="en">
  <head>
    {%- block head %}
    <title>
      {% block title %}
      {% endblock title %}
    </title>
    {%- block metas %}
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
    {%- endblock metas %}

    {%- block styles %}
      <!-- Font Awesome -->
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
      <!-- Bootstrap -->
      <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <!-- MDB -->
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
    {%- endblock styles %}

    {%- endblock head %}
  </head>

  <body class="{% block body_attribs %}{% endblock body_attribs %}">
    {% block body %}
      {% block header %}
        {% block sidebar %}
        {% endblock sidebar %}

        {% block navbar %}
        {% endblock navbar %}
      {% endblock header %}

      {% block content %}
      {% endblock content %}

      {% block footer %}
      {% endblock footer %}
    {% endblock body %}

    {% block scripts %}
    {% endblock scripts %}

  </body>
</html>
